import React from 'react';
import { Carousel, WingBlank } from 'antd-mobile';
import Lazyload from 'react-lazyload';
import style from './CarouselComponent.module.scss';
interface Iprops {
    banner: Array<object>,
    height: string
}
const CarouselComponent: React.FC<Iprops> = props => {
    return <div className={style.carousel}>
        <WingBlank>
            <Carousel
                autoplay={true}
                infinite
            >
                {props.banner && props.banner.map((item: any) => (
                    <div
                        key={item.id}
                    >
                        <Lazyload overflow={true} offset={750}>
                            <img
                                alt=""
                                src={item.image_url?item.image_url:item.img_url}
                                style={{ height: `${props.height}px`,verticalAlign: 'top' }}
                                onLoad={() => {
                                    // fire window resize event to change height
                                    window.dispatchEvent(new Event('resize'))
                                }}
                            />
                        </Lazyload>
                    </div>
                ))}
            </Carousel>
        </WingBlank>
    </div>

}
export default CarouselComponent
